<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="verydows-baseurl" content="<{$common.baseurl}>">
<meta name="keywords" content="找回密码" />
<meta name="description" content="找回密码" />
<title>找回密码 - <{$GLOBALS.cfg.site_name}></title>
<link rel="stylesheet" type="text/css" href="<{$common.theme}>/css/general.css" />
<link rel="stylesheet" type="text/css" href="<{$common.theme}>/css/login.css" />
<script type="text/javascript" src="<{$common.baseurl}>/public/script/jquery.js"></script>
<script type="text/javascript" src="<{$common.theme}>/js/general.js"></script>
<script type="text/javascript">
function resetCaptcha(){
  var src = "<{url c='api/captcha' a='image' v='random'}>";
  $('#captcha-img').attr('src', src.replace('random', Math.random()));
  $('#captcha').focus();
}
</script>
</head>
<body>
<!-- 头部开始 -->
<div class="header">
  <div class="w900 mt30 cut">
    <div class="logo"><a href="<{url c='main' a='index'}>"><img src="<{$common.theme}>/images/logo.gif" /></a></div>
  </div>
</div>
<!-- 头部结束 -->
<!-- 主体开始 -->
<div class="container w900 mt20">
  <div class="wbox cut">
    <div class="retrieve cut">
      <h2 class="aln-c">找回密码</h2>
      <{if $step == 1}>
      <script type="text/javascript">
        function nextStep(){
          var form = $('#nsform');
          form.find('input[name="username"]').vdsFieldChecker({rules:{required:[true, '请输入用户名']}});
          form.find('input[name="captcha"]').vdsFieldChecker({rules:{required:[true, '请输入验证码']}});
          form.vdsFormChecker();
        }
      </script>
      <div class="step x-auto mt20 cut">
        <ul>
          <li class="passed"><div class="circle">1</div><p>填写用户名</p><div class="axis"></div></li>
          <li><div class="circle">2</div><p>验证邮箱</p></li>
          <li><div class="circle">3</div><p>设置新密码</p></li>
          <li><div class="circle">4</div><p>完成</p></li>
        </ul>
        <div class="xaxis"></div>
      </div>
      <div class="sfm mt20 pad10 x-auto">
        <form method="post" action="<{url c='retrieve' a='password' step='2'}>" id="nsform">
          <dl class="table"><dt>用户名：</dt><dd><input type="text" name="username" class="txt" /></dd></dl>
          <dl class="table mt8">
            <dt>验证码：</dt>
            <dd><input type="text" name="captcha" id="captcha" class="txt" /></dd>
          </dl>
          <div class="mt5 pl120"><img id="captcha-img" src="<{url c='api/captcha' a='image'}>" /><a class="ml10 pointer" onclick="resetCaptcha()">看不清? 换一张</a></div>
          <div class="mt15 pl120"><a class="nextbtn btn" onclick="nextStep()">下一步</a></div>
        </form>
      </div>
      <{elseif $step == 2}>
      <script type="text/javascript">
        var countdown = 180;
        $(function(){
          $('#sendbtn').on('click', function(){sendCaptcha()});
        });
        
        function sendCaptcha(){
          $.ajax({
            type: 'post',
            dataType: 'json',
            url: "<{url c='api/sendmail' a='retrieve_password'}>",
            beforeSend: function(){
              $.vdsPopWaiting({sw:true, text:'正在向您的邮箱发送验证码, 请等待...'});
            },
            success: function(res){
              $.vdsPopWaiting({sw:false});
              if(res.status == 'success'){
                $('#sendbtn').off().removeClass('sm-blue').addClass('sm-disb');
	countdown = 180;
                resendCounting();
                $('#nsform').show();
              }else{
                $.vdsMasker(true);
                $.vdsPopDialog({type:'err', text:res.msg, callback:function(){$.vdsMasker(false)}});
              }
            }
          });
        }
        
        function resendCounting(){
            var timer = window.setInterval(function(){	
            if(countdown >= 0){
              $('#sendbtn').text(countdown+'秒后重新获取');
              countdown --;
            }else{
              clearInterval(timer);
              $('#sendbtn').text('重新发送验证码').removeClass('sm-disb').addClass('sm-blue').on('click', function(){sendCaptcha()});
              return false;
            }
          }, 1000);
        }
        
        function nextStep(){
          var form = $('#nsform');
          form.find('input[name="email_captcha"]').vdsFieldChecker({rules:{required:[true, '请输入验证码']}});
          form.vdsFormChecker();
        }
      </script>
      <div class="step x-auto mt20 cut">
        <ul>
          <li class="passed"><div class="circle">1</div><p>填写用户名</p><div class="axis"></div></li>
          <li class="passed"><div class="circle">2</div><p>验证邮箱</p><div class="axis"></div></li>
          <li><div class="circle">3</div><p>设置新密码</p></li>
          <li><div class="circle">4</div><p>完成</p></li>
        </ul>
        <div class="xaxis"></div>
      </div>
      <div class="sfm mt20 mb10 pad10 x-auto">
        <dl class="table f14"><dt>邮箱：</dt><dd><font class="mr10"><{$email}></font><a class="f12 sm-blue" id="sendbtn">发送验证码</a></dd></dl>
        <form id="nsform" class="hide" method="post" action="<{url c='retrieve' a='password' step='3'}>">
        <input type="hidden" name="token" value="<{$token}>" />
        <dl class="table f14 mt15 hide"><dt>验证码：</dt><dd><input type="w150 text" name="email_captcha" class="txt" /></dd></dl>
        <p class="mt15 pl120"><a class="nextbtn btn" onclick="nextStep()">下一步</a></p>
        </form>
      </div>
      <{elseif $step == 3}>
      <script type="text/javascript">
        function nextStep(){
          var form = $('#password-form');
          form.find('input[name="password"]').vdsFieldChecker({rules:{required:[true, '新密码不能为空'], password:[true, '不符合格式要求']}});
          form.find('input[name="repassword"]').vdsFieldChecker({rules:{equal:[form.find('input[name="password"]').val(), '两次密码不一致']}});
          form.vdsFormChecker();
        }
      </script>
      <div class="step x-auto mt20 cut">
        <ul>
          <li class="passed"><div class="circle">1</div><p>填写用户名</p><div class="axis"></div></li>
          <li class="passed"><div class="circle">2</div><p>验证邮箱</p><div class="axis"></div></li>
          <li class="passed"><div class="circle">3</div><p>设置新密码</p><div class="axis"></div></li>
          <li><div class="circle">4</div><p>完成</p></li>
        </ul>
        <div class="xaxis"></div>
      </div>
      <div class="sfm mt20 mb10 pad10 x-auto">
        <form method="post" action="<{url c='retrieve' a='password' step='4'}>" id="password-form">
          <dl class="table">
            <dt>设置新密码：</dt>
            <dd><input type="password" name="password" class="txt" /><p class="caaa">密码可包含字母、数字或特殊符号，长度为6~32个字符</p></dd>
          </dl>
          <dl class="table">
            <dt>确认新密码：</dt>
            <dd><input type="password" name="repassword" class="txt" /><p class="caaa">再次输入您所设置的新密码</p></dd>
          </dl>
          <div class="pl120 mt15"><a class="nextbtn btn" onclick="nextStep()">下一步</a></div>
        </form>
      </div>
      <{elseif $step == 4}>
      <div class="step x-auto mt20 cut">
        <ul>
          <li class="passed"><div class="circle">1</div><p>填写用户名</p><div class="axis"></div></li>
          <li class="passed"><div class="circle">2</div><p>验证邮箱</p><div class="axis"></div></li>
          <li class="passed"><div class="circle">3</div><p>设置新密码</p><div class="axis"></div></li>
          <li class="passed"><div class="circle">4</div><p>完成</p><div class="axis"></div></li>
        </ul>
        <div class="xaxis"></div>
      </div>
      <div class="mt20 mb10 pad10 aln-c">
        <h3 class="f14 green">新密码设置成功！请牢记您所设置的新密码</h3>
        <p class="mt15 c666">现在可以用新密码登录您的账户<a class="ml10" href="<{url c='user' a='login'}>">点击登录</a></p>
      </div>
      <{/if}>
    </div>
  </div>
</div>
<!-- 主体结束 -->
<div class="cl"></div>
<!-- 页脚开始 -->
<{layout_footer}>
<!-- 页脚结束 -->
</body>
</html>